<template>
  <div
    class="echart"
    id="percent"
    :style="{ float: 'left', width: '100%', height: '1.2rem' }"
  ></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  props: {
    unitNumber: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    this.initEcharts();
  },
  watch: {
    unitNumber() {
      this.initEcharts();
    },
  },
  methods: {
    fontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 1920);
      return res * fontSize;
    },
    initEcharts() {
      let value = this.unitNumber;
      let title = "区域企业数";
      let int = value.toFixed(2).split(".")[0];
      const option = {
        title: {
          text: "{a|" + int + "}\n{c|" + title + "}",
          x: "center",
          y: "center",
          textStyle: {
            rich: {
              a: {
                fontSize: this.fontSize(0.3),
                color: "#29EEF3",
              },
              c: {
                fontSize: this.fontSize(0.16),
                color: "#ffffff",
                padding: [10, 0],
              },
            },
          },
        },
        series: [
          {
            type: "gauge",
            radius: "100%",
            clockwise: true,
            startAngle: "90",
            endAngle: "-269.9999",
            splitNumber: 50,
            detail: {
              offsetCenter: [0, -20],
              formatter: " ",
            },
            pointer: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [0.1, "#70F1FD"],
                  [0.3, "#51B2F9"],
                  [0.5, "#70F1FD"],
                  [1, "#51B2F9"],
                ],
                width: 10,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 32,
              lineStyle: {
                color: "#051F54",
                width: 6,
              },
            },
            axisLabel: {
              show: false,
            },
          },
          {
            type: "pie",
            name: "内层细圆环",
            radius: ["75%", "85%"],
            hoverAnimation: false,
            startAngle: 200,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00a7fb", // 0% 处的颜色
                    },
                    {
                      offset: 0.3,
                      color: "#00a7fb80", // 100% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: "#00a7fb50", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#00a7fb10", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("percent")); // 图标初始化
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="less">
canvas {
  height: 1.2rem;
  width: 100%;
}
</style>
